<template>
  <div class="tools-container">
    <el-page-header @back="onBack" title="关闭" content="对话模式" :icon="CloseBold" style="color: white;"></el-page-header>

    <el-row :gutter="16" class="tools-grid">
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-for="(tool, index) in tools" :key="index">
        <div class="tool-card" :class="{ active: isActive(tool.value) }">
          <div class="tool-card-header">
            <span class="tool-card-title">{{ tool.title }}</span>
            <el-switch v-model="tool.active" :active-value="true" :inactive-value="false"
              @change="handleSwitchChange(tool.value, $event)"
              :disabled="requiresRoleSelection(tool.value) && !tool.selectedRole" active-color="#409EFF" />
          </div>
          <!-- 新增：仅对 RAG 和 Graph 工具显示下拉框 -->
          <el-select v-if="requiresRoleSelection(tool.value)" v-model="tool.selectedRole" placeholder="请选择身份"
            @change="handleRoleChange(tool)" style="margin-bottom: 8px; width: 100%;">
            <el-option label="学生" value="student" />
            <el-option label="老师" value="teacher" />
            <el-option label="行政人员" value="admin" />
            <el-option label="其他" value="other" />
          </el-select>
          <p class="tool-card-description">仅支持 ChatCUMT 本地调用</p>
          <div class="tool-icon">
            <i :class="tool.icon"></i>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { CloseBold } from "@element-plus/icons-vue";

export default {
  name: "Tools",
  data() {
    return {
      CloseBold,
      tools: [
        {
          title: "联网搜索",
          value: "search",
          icon: "el-icon-search",
          active: false
        },
        {
          title: "文件对话",
          value: "file",
          icon: "el-icon-folder-opened",
          active: false
        },
        {
          title: "CUMT知识库RAG检索",
          value: "rag",
          icon: "el-icon-notebook-2",
          active: false,
          selectedRole: ""  // 新增字段
        },
        {
          title: "CUMT知识图谱检索",
          value: "graph",
          icon: "el-icon-connection",
          active: false,
          selectedRole: ""  // 新增字段
        }
      ]
    };
  },
  created() {
    this.tools.forEach(tool => {
      tool.active = this.$store.state.setting.chat_type === tool.value;
    });
  },
  methods: {
    onBack() {
      this.$router.push("/");
    },
    isActive(value) {
      return this.$store.state.setting.chat_type === value;
    },
    requiresRoleSelection(value) {
      return value === "rag" || value === "graph";
    },
    handleRoleChange(tool) {
      if (tool.title === "CUMT知识库RAG检索") {
        this.$store.dispatch("changeSetting", {
          key: "rag_role",
          value: tool.selectedRole
        })
      }
      else {
        this.$store.dispatch("changeSetting", {
          key: "rag_gra_role",
          value: tool.selectedRole
        })
      }
      // 在这里你可以执行一些操作，如记录选择或启用开关
      console.log(`${tool.title} 选择了角色：${tool.selectedRole}`);
    },
    handleSwitchChange(value, isActive) {
      const tool = this.tools.find(t => t.value === value);
      if (this.requiresRoleSelection(value) && !tool.selectedRole) {
        return; // 防止切换
      }
      if (isActive) {
        this.$store.dispatch("changeSetting", {
          key: "chat_type",
          value: value
        });
        this.tools.forEach(tool => {
          tool.active = tool.value === value;
        });
      } else {
        this.$store.dispatch("changeSetting", {
          key: "chat_type",
          value: "chat"
        });
      }
    }
  }
};
</script>

<style scoped>
:root {
  --theme-blue: #409EFF;
  --theme-blue-light: #f0f7ff;
  --theme-blue-border: #a0cfff;
  --theme-blue-hover: rgba(64, 158, 255, 0.15);
  --card-font-color: #2c3e50;
}

.tools-container {
  padding: 16px;
}

:deep(.el-page-header) {
  margin-bottom: 20px;
}

:deep(.el-page-header__content),
:deep(.el-page-header__back) {
  color: var(--card-font-color);
}

.tools-grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.tool-card {
  position: relative;
  height: 140px;
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--theme-blue-light);
  border: 1px solid var(--theme-blue-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  overflow: hidden;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px var(--theme-blue-hover);
  border-color: var(--theme-blue);
}

.tool-card.active {
  background: #e6f2ff;
  border-color: var(--theme-blue);
}

.tool-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tool-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--card-font-color);
}

.tool-card-description {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.tool-card {
  position: relative;
  height: 140px;
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #f5faff;
  /* 统一浅蓝色底 */
  border: 1px solid #d0e6ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.15);
  border-color: #b3d8ff;
}

.tool-card.active {
  background: linear-gradient(135deg, #e6f2ff, #cce6ff);
  /* 渐变增强视觉 */
  border-color: #409EFF;
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.3);
}

.tool-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tool-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.tool-card-description {
  font-size: 12px;
  color: #909399;
  margin: 0;
  line-height: 1.5;
}

.tool-icon {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: 40px;
  color: rgba(64, 158, 255, 0.15);
  transition: all 0.3s ease;
}

.tool-card:hover .tool-icon {
  color: rgba(64, 158, 255, 0.25);
}

.tool-card.active .tool-icon {
  color: rgba(64, 158, 255, 0.5);
  /* 高亮图标 */
}

@media (max-width: 768px) {
  .tool-card {
    height: 120px;
    padding: 16px;
  }

  .tool-card-title {
    font-size: 15px;
  }

  .tool-icon {
    font-size: 36px;
  }
}
</style>
